<template>
  <div class="trend">
    <div class="title" :style="comStyle">
      <span>{{'▍' + showTitle}}</span>
      <span class="iconfont title-icon" @click="showChoice = !showChoice">&#xe6eb;</span>
      <div class="select-con" v-show="showChoice">
        <div class="select-item" v-for="item in selectTypes" :key="item.key" @click="handleSelect(item.key)">
          {{item.text}}
        </div>
      </div>
    </div>
    <div class="trend-chart" ref="trend_chart">
    </div>
  </div>
</template>

<script>
  export default {
    name: "Trent",
    data() {
      return {
        chartInstance: null,
        allData: null,
        showChoice: false,
        choiceType: 'map',
        fontSize: 0
      }
    },
    created() {
      this.$socket.registerCallback("trendData", this.getChartData)
    },
    mounted() {
      this.initChart()
      // this.getChartData()
      this.$socket.send({
        action: 'getData',
        socketType: 'trendData',
        chartName: 'trend',
        value: ''
      })
      window.addEventListener("resize", this.screenAdapter)
      this.screenAdapter()
    },
    destroyed() {
      window.removeEventListener('resize', this.screenAdapter)
      this.$socket.unRegisterCallback("trendData")
    },
    computed: {
      selectTypes() {
        if (!this.allData) {
          return []
        } else {
          return this.allData.type.filter(item => item.key !== this.choiceType)
        }
      },
      showTitle() {
        if (!this.allData) {
          return ''
        } else {
          return this.allData[this.choiceType].title
        }
      },
      comStyle() {
        return {
          fontSize: this.fontSize / 2 + 'px'
        }
      }
    },
    methods: {
      initChart() {
        this.chartInstance = this.$echarts.init(this.$refs.trend_chart, "chalk")
        const initOperation = {
          grid: {
            left: '3%',
            top: '35%',
            right: '4%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: 20,
            top: '15%',
            icon: 'circle'
          },
          yAxis: {
            type: 'value'
          }
        }
        this.chartInstance.setOption(initOperation)
        this.chartInstance.on('mouseover', () => clearInterval(this.timerId))
        this.chartInstance.on('mouseout', () => this.startInterval())
      },
      getChartData(ret) {
        // const {data: ret} = await this.$http.get("/trend")
        this.allData = ret
        this.updateChart()
      },
      updateChart() {
        const color1 = [
          'rgba(11,168,44,0.5)',
          'rgba(44,110,255,0.5)',
          'rgba(22,242,217,0.5)',
          'rgba(254,33,30,0.5)',
          'rgba(250,105,0,0.5)'
        ]
        const color2 = [
          'rgba(11,168,44,0)',
          'rgba(44,110,255,0)',
          'rgba(22,242,217,0)',
          'rgba(254,33,30,0)',
          'rgba(250,105,0,0)'
        ]
        const timeArr = this.allData.common.month
        const valueArr = this.allData[this.choiceType].data
        const seriesArr = valueArr.map((item, index) => {
          return {
            name: item.name,
            type: 'line',
            data: item.data,
            stack: this.choiceType,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: color1[index]}, {offset: 1, color: color2[index]}
              ])
            }
          }
        })
        const legendArr = valueArr.map(item => {
          return item.name
        })
        const dataOption = {
          xAxis: {
            data: timeArr
          },
          legend: {
            data: legendArr
          },
          series: seriesArr
        }
        this.chartInstance.setOption(dataOption)
      },
      screenAdapter() {
        this.fontSize = this.$refs.trend_chart.offsetWidth / 100 * 3.6
        const adapterOption = {
          legend: {
            itemWidth: this.fontSize,
            itemHeight: this.fontSize,
            itemGap: this.fontSize,
            textStyle: {
              fontSize: this.fontSize / 4
            }
          }
        }
        this.chartInstance.setOption(adapterOption)
        this.chartInstance.resize()
      },
      handleSelect(key) {
        this.choiceType = key
        this.updateChart()
        this.showChoice = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .title {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 10;
    color: white;

    .title-icon {
      margin-left: 10px;
      cursor: pointer;
    }
  }
</style>